import React, { Component } from 'react';
import './Shopcart.scss'
import service from '../../api';
import { ErrorBlock, Space, NavBar, Footer, Checkbox, Stepper, List, SwipeAction, Modal, Toast } from 'antd-mobile'


class Shopcart extends Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            recommList: [],
            cartList: [],
            flag: false,
            show: false,
            price: '',
            rightActions: [
                {
                    key: 'delete',
                    text: '删除',
                    color: 'danger',
                }
            ]
        }
    }

    async componentDidMount() {

        if (!localStorage.getItem('token')) {
            this.props.history.push('/login')
        }
        this.cart_list()

        // 获取推荐数据
        var res = await service.pro.recommendlist({ count: 2, limitNum: 50 })
        this.setState({
            recommList: res.data.data
        })
    }

    // 跳详情页
    toDetail(id: any) {
        // console.log(id);
        this.props.history.push({ pathname: '/detail', state: { id } })
    }

    // 删除单条数据
    async del(cartid: any) {
        console.log(cartid);

        var res = await service.cart.remove({ cartid })
        console.log(res);
        this.cart_list()
        Toast.show({
            content: '已删除'
        })
    }

    // 删除全部购物车数据
    delAll() {
        this.state.cartList.length == 0 ?
            this.setState({ show: false }) :
            Modal.alert({
                title: '清空购物车',
                content: '是否删除购物车内的所有数据',
                showCloseButton: true,
                onConfirm: async () => {

                    var res = await service.cart.removeAll({ userid: localStorage.getItem('userid') })
                    console.log(res);
                    this.cart_list()
                    Toast.show({
                        content: '清空成功'
                    })
                }
            })
    }

    // 步进器
    async updatenum(cartid: any, num: any, value: any) {
        console.log(value);

        console.log(cartid, num);
        var res = await service.cart.updatenum({ cartid, num: value })
        console.log(res);
        localStorage.setItem('value', value)
        this.cart_list()
    }


    // 更新单条数据状态
    async check(cartid: any, flag: any) {
        var res = await service.cart.selectone({ cartid, flag: !flag })
        console.log(res);
        this.cart_list()
    }

    // 更新全部数据的状态
    async checkedAll() {
        var res = await service.cart.selectall({ userid: localStorage.getItem('userid'), type: !this.state.flag })
        console.log(res);
        this.setState({
            flag: this.state.cartList.map((item: any) => {
                return item.flag
            })
        })
        this.cart_list()

    }

    // 查看购物车
    async cart_list() {
        // 查看购物车
        var data = await service.cart.cart_list({ userid: localStorage.getItem('userid') })
        console.log(data);
        this.setState({
            cartList: data.data.data,
        })
    }


    // 提交订单
    async toOrder() {
        var res = await service.order.addOrder({ userid: localStorage.getItem('userid') })
        localStorage.setItem('time', res.data.time)
        this.props.history.push('/order')
    }

    render() {
        return (
            <div className='shopcart'>
                <div className="top">
                    <NavBar onBack={() => { this.props.history.push('/') }}>购物车</NavBar>
                </div>


                {
                    this.state.cartList == null ?
                        <div className="nodata">
                            <Space block direction='vertical' style={{ '--gap': '16px' }}>
                                <ErrorBlock status='empty' title={'购物车再无数据'} description={<a href="./cate">去逛逛商品吧</a>} />
                            </Space>
                        </div> :

                        <div className="cart">
                            {
                                this.state.cartList.map((item: any, index: any) => {


                                    return (
                                        <List key={index}>
                                            <SwipeAction
                                                // key={index}
                                                rightActions={this.state.rightActions}
                                                onAction={() => { this.del(item.cartid) }}
                                            >
                                                <List.Item className='bbox'>
                                                    <div className="box" >
                                                        <Space className='checkbox' direction='vertical'>
                                                            <Checkbox defaultChecked={item.flag} onChange={() => { this.check(item.cartid, item.flag) }} />
                                                        </Space>
                                                        <div className="left">
                                                            <img src={item.img1} alt="" />
                                                        </div>
                                                        <div className="right">
                                                            <div className="name">{item.proname}</div>
                                                            <div className="price">¥ {item.originprice}</div>
                                                            <Stepper onChange={(value) => { this.updatenum(item.cartid, item.num, value) }} inputReadOnly className='num' min={1} />
                                                        </div>
                                                    </div>
                                                </List.Item>
                                            </SwipeAction>

                                        </List>
                                        // <div className="box" key={index}>
                                        //     <Space className='checkbox' direction='vertical'>
                                        //         <Checkbox />
                                        //     </Space>
                                        //     <div className="left">
                                        //         <img src={item.img1} alt="" />
                                        //     </div>
                                        //     <div className="right">
                                        //         <div className="name">{item.proname}</div>
                                        //         <div className="price">¥ {item.originprice}</div>
                                        //         <Stepper className='num' min={1} />
                                        //     </div>
                                        // </div>
                                    )
                                })
                            }
                        </div>
                }


                {/* 去支付 */}
                <div className="submit">
                    <Checkbox defaultChecked={this.state.flag} style={{ '--font-size': '14px' }} onChange={() => { this.checkedAll() }}>全选</Checkbox>
                    <button disabled={this.state.show} className='but' onClick={() => { this.delAll() }}>清空购物车</button>
                    <p>合计: <span>¥{this.state.price}</span></p>
                    <button disabled={this.state.show} className='but' onClick={() => { this.toOrder() }}>提交订单</button>
                </div>



                <h2>猜你喜欢</h2>
                <div className="recomm">
                    {
                        this.state.recommList.map((item: any, index: any) => {
                            return (
                                // 首页商品列表
                                <div className="box" key={index} onClick={() => this.toDetail(item.proid)}>
                                    <img src={item.img1} alt="" />
                                    <div className="name">{item.proname}</div>
                                    <div className="price">¥{item.originprice}</div>
                                </div>
                            )
                        })
                    }
                </div>
                <Footer label='没有更多了'></Footer>


            </div>
        );
    }
}

export default Shopcart;